<template>
  <el-button @click="clickMutation" type="primary">Mutation</el-button>
  <el-button @click="clickAction" type="primary">Action</el-button>
  <el-button @click="clickMutationMA" type="primary">Mutation-MA</el-button>
  <Vuex2></Vuex2>
  <div class="mt-5">{{ vuex.state.count }}</div>
  <div>{{ vuex.getters.doneTodos }}</div>
  <div>{{ vuex.getters.doneTodosCount }}</div>
  <div>{{ vuex.getters.getTodoById(2) }}</div>
  <div>{{ vuex.state.a.count }}</div>
</template>

<script setup>
import { onMounted } from "vue";
import { useStore } from "vuex";
import Vuex2 from "./Vuex2.vue";

const vuex = useStore();

function clickMutation() {
  vuex.commit({
    type: "increment",
    amount: 1,
  });
}

function clickAction() {
  vuex.dispatch({
    type: "incrementAsync",
    amount: 1,
  });
}

function clickMutationMA() {
  vuex.commit({
    type: "incrementMA",
  });
}

onMounted(() => {});
</script>
